<template>
	<view>
		<ttBar leftIcon="icon-back" title="支付订单"></ttBar>
		<view class="priceBox">
			<text>￥{{orderData.payAmount.toFixed(2)}}</text>
		</view>
		<view class="payBox" :style="{ height: hg + 'px' }">
			<text class="title">请选择支付方式</text>
			<view class="typeRow">
				<view class="row">
					<image src="../../static/wxpay.png"></image>
					<view class="payInfo">
						<text>微信支付</text>
						<text>亿万用户的选择，更快更安全</text>
					</view>
					<text class="iconfont icon-yuanxingxuanzhongfill"></text>
				</view>
			</view>
			<button class="payBtn" @tap="getOrderSign">确认支付</button>
		</view>
		<hk-modal ref="hkModal"></hk-modal>
	</view>
</template>

<script>
import ttBar from '@/components/ttBar/ttBar.vue';
import { mapState, mapGetters, mapMutation, mapActions } from 'vuex';
export default {
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo,
			isLogin: state => state.user.isLogin
		})
	},
	components: {
		ttBar
	},
	props: {
		resouceData: {
			type: Object,
			default: () => {
				return {
					leftSeconds: 1
				};
			}
		}
	},
	data() {
		return {
			hg: uni.getSystemInfoSync().screenHeight - uni.upx2px(354),
			payType: 'wxpay',
			orderData: {
				payAmount: 0
			},
			payList: [],
			oldType: null,
			isIstWx: false,
			shopInfo: {
				id: 0
			},
			goodData: {},
			activeId: 0,
			cid:'',
			getshow:false,
			newid:'',
			getnewshow:false
		};
	},
	methods: {
		selectType(e) {
			this.payType = e.currentTarget.dataset.type;
		},
		getData(_id) {
			this.$store
				.dispatch('apiGetOrderDt', {
					orderNo: _id
				})
				.then(res => {
					this.orderData = res.data.data;
					
				});
		},
		getDatacg(_id) {
			this.$store
				.dispatch('apiGetOrderDtcg', {
					usualOrderNo: _id
				})
				.then(res => {
					console.log(res.data.data[0])
					this.orderData = res.data.data[0];
					console.log(this.orderData.orderNo)
					
				});
		},
		getArrData(_arr) {
			let r = _arr.split(',');
			let n = 0;
			r.forEach(x => {
				this.$store
					.dispatch('apiGetOrderDt', {
						orderNo: x
					})
					.then(res => {});
			});
		},
		getOrderSign() {
			this.$store.dispatch('loginByWexin').then(res => {
				console.log(res);
				if(this.cid){
					this.$store
						.dispatch('apiGetMpSignNew', {
							orderNo: this.orderData.orderNo,
							openId: res.data.data.openid
						})
						.then(signres => {
							console.log(signres.data)
							this.payOrder(signres.data);
						});
				}else{
					this.$store
						.dispatch('apiGetMpSign', {
							orderNo: this.orderData.orderNo,
							openId: res.data.data.openid
						})
						.then(signres => {
							
							this.payOrder(signres.data);
						});
				}
				
			});
		},
		payOrder(res) {
			if (this.payType == 'wxpay') {
				//微信支付
				wx.requestPayment({
					timeStamp: res.timeStamp,
					nonceStr: res.nonceStr,
					package: res.package,
					signType: res.signType,
					paySign: res.paySign,
					success: res => {
						this.$store.dispatch('getToken').then(() => {
							this.$store.dispatch('reportAction', {
								acType: 'COMPLETE_ORDER',
								chaseValue: parseInt(this.orderData.payAmount * 100)
							});
						});
						if(this.getshow){
							uni.redirectTo({
								url:
									'/pagesA/payResultcg/payResultcg?id='  + this.orderData.orderNo
							});
						}else if(this.getnewshow){							
							uni.redirectTo({
								url:
									'/pagesA/payResultcgnew/payResultcgnew?id=' +
									this.orderData.orderNo  +
									'&groupId=' +
									this.orderData.groupId +
									'&img=' +
									this.orderData.img +
									'&name=' +
									this.orderData.name
							});
						}else{
							uni.redirectTo({
								url:
									'/pagesA/payResult/payResult?id=' +
									this.orderData.orderNo +
									'&courseId=' +
									this.orderData.courseId +
									'&actId=' +
									this.orderData.actId +
									'&groupId=' +
									this.orderData.groupId +
									'&img=' +
									this.orderData.img +
									'&name=' +
									this.orderData.name
							});
						}
						
						// 付款完成更新状态
						this.$store
							.dispatch('apiGetMyorderStatus', {
								orderNo: this.orderData.orderNo
							})
							.then(res => {
								//返佣
								this.$store.dispatch('apiGetMyorderYongjin', { orderNo: this.orderData.orderNo })
								.then(res=>{
									console.log(res)
								})
							});
							
							// 付款完成更新状态助力活动
							this.$store
								.dispatch('apiGetpowerstatus', {
									orderNo: this.orderData.orderNo,
									type:4
								})
								.then(res => {
									console.log(res)
								});
							
					},
					fail: res => {
						if (res.errMsg.indexOf('fail cancel') > -1) {
							this.$refs.hkModal.init({
								title: '支付失败',
								cntText: '用户取消了订单支付',
								cancle: ''
							});
							this.$refs.hkModal.show();
						} else {
							this.$refs.hkModal.init({
								title: '支付失败',
								cntText: '支付失败，请稍后再试,' + res.errMsg,
								cancle: ''
							});
							this.$refs.hkModal.show();
						}
					},
					complete: res => {}
				});
			}
		}
	},

	onLoad(cfm) {
		this.actId = cfm.actId;
		this.cid = cfm.cid;
		this.newid = cfm.newid
		if (cfm.id) {
			this.getData(cfm.id);
		} else if(cfm.cid) {
			
			this.getDatacg(cfm.cid);
			this.getshow = true;
		}else if(cfm.newid) {
			
			this.getData(cfm.newid);
			this.getnewshow = true;
		}else {
			this.getArrData(cfm.idarr);
		}
		this.oldType = parseInt(cfm.paytype);
	},
	onBackPress(e) {
		let _this = this;
		this.$refs.hkModal.init({
			title: '确认放弃',
			cntText: '是否放弃本次付款？',
			cancle: '放弃',
			confirm: '付款',
			confirmFcn: function() {
				_this.$refs.hkModal.close();
			},
			cancleFcn: function() {
				uni.redirectTo({
					url: '/pagesA/orderDt/orderDt?id=' + _this.orderData.orderNo
				});
			}
		});
		this.$refs.hkModal.show();

		return true;
	}
};
</script>

<style lang="less">
page {
	background-color: #f6f6f6;
}

.priceBox {
	height: 210rpx;
	box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
	margin: 18upx;
	background-color: #ffffff;
	border-radius: 10upx;
	display: flex;
	justify-content: center;
	align-items: center;

	text {
		font-size: 60rpx;
		color: #ff3b2b;
	}

	text:first-letter {
		font-size: 40upx;
	}
}

.payBox {
	box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
	margin: 18upx;
	background-color: #ffffff;
	border-radius: 10upx;
	display: flex;
	flex-direction: column;
	position: relative;

	.title {
		padding: 26upx 44upx;
		font-size: 32upx;
	}

	.typeRow {
		display: flex;
		flex-direction: column;
		padding: 0 70upx;

		.row {
			display: flex;
			align-items: center;
			padding: 40upx 0;
			border-bottom: 1px solid #eeeeee;

			image {
				width: 90upx;
				height: 90upx;
				flex-shrink: 0;
				margin-right: 20upx;
			}

			.payInfo {
				display: flex;
				flex-direction: column;
				font-size: 32upx;
				color: #202932;
				flex-grow: 1;

				text:last-child {
					font-size: 28upx;
					color: #939393;
				}
			}

			.iconfont {
				font-size: 40upx;
				color: #cccccc;
			}

			.icon-yuanxingxuanzhongfill {
				color: #ffb11a;
			}
		}
	}
}

.payBtn {
	border: none;
	margin: 0;
	background: linear-gradient(to right, #ff7f2a, #ff5a2a);
	color: #ffffff;
	font-size: 32upx;
	font-weight: bold;
	height: 84upx;
	border-radius: 42upx;
	// margin: 0 120upx;
	position: absolute;
	bottom: 70upx;
	width: 80%;
	left: 10%;
}

.payBtn:after {
	border: none;
}
</style>
